<template>
  <div class="colselection">
    <el-dropdown trigger="click">
      <el-button>列选择</el-button>
      <el-dropdown-menu slot="dropdown">
        <el-checkbox-group
          @change="change"
          v-model="checkList"
          style="display: flex; flex-direction: column"
        >
          <el-checkbox
            style="margin-right: 0; margin-left: 0"
            v-for="check in allList"
            :border="true"
            :key="check"
            :label="check"
          ></el-checkbox>
        </el-checkbox-group>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const emit = defineEmits(["changCol"]);
const props = defineProps({
  allList: {
    typeof: Array,
    require: true,
  },
});
const checkList = ref([...props.allList]);
const change = (e) => {
  console.log(e);
  emit("changCol", e);
};
</script>

<style scoped lang="less">
.colselection {
  .el-checkbox {
    margin-right: 0;
  }
}
</style>
